<template>
  <p>生命周期 {{ msg }}</p>
</template>

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";

export default {
  name: "LifeCycles",

  props: {
    msg: String,
  },

  /* 
  
  setup是Vue3的组合式API入口 
  写在setup内的代码 应使用Vue3新语法 
  */
  setup() {
    // setup 支棱起来了！
    // 等于 beforeCreate + created
    console.log("setup 支棱起来了~");

    /* 挂载前回调 */
    onBeforeMount(
      // 组件预备挂载时回调下面的函数
      () => {
        console.log("组件预备挂载时回调我");
      }
    );

    onMounted(() => console.log("组价挂载完毕时回调我"));


    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("onUpdated");
    });

    onBeforeUnmount(() => {
      console.log("onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("onUnmounted");
    });
  },

  //   beforeCreate() {
  //     console.log("beforeCreate");
  //   },
  //   created() {
  //     console.log("created");
  //   },

  //   beforeMount() {
  //     console.log("beforeMount");
  //   },
  //   mounted() {
  //     console.log("mounted");
  //   },

  //   beforeUpdate() {
  //     console.log("beforeUpdate");
  //   },
  //   updated() {
  //     console.log("updated");
  //   },

  //   // beforeDestroy 改名
  //   beforeUnmount() {
  //     console.log("beforeUnmount");
  //   },
  //   // destroyed 改名
  //   unmounted() {
  //     console.log("unmounted");
  //   },
};
</script>
